import { Tabs } from 'nextra/components'
import { Badge } from '/components/badge'

# ECharts 配置

用于配置插入图表时的弹窗的默认显示行为，如果您要自定义 ECharts 图表配置。<Badge theme="success">v6.0.0 新增</Badge>

## 默认配置

```js
{
  echarts: {
    mode: 1,
    haveImage: false,
    onCustomSettings() {
      return null
    },
  },
}
```

## 配置项说明

### echarts.mode

**说明**：图表设置时，默认打开的模式。

**类型**：`Number`

**默认值**：`1`

**可选值**：

- `0`：直接使用 ECharts 的 options json 源码模式
- `1`：可视化模式，可以通过配置创建图表

### echarts.renderImage

**说明**：是否渲染成图片，如果为 `true` 则在图片展示的同时保存一张 ECharts 图片，主要用于复杂图形模式 Word 无法生成但又要有类似效果场景。

**类型**：`Boolean`

**默认值**：`false`

**可选值**：

- `true`：生成图片
- `false`：不生成图片

### echarts.onCustomSettings

**说明**：自定义 ECharts 图表配置方法。

**类型**：`Function`。

**参数**：

- `data`：`Array`，图表数据。
- `config`：`Object`，用户当前 ECharts 图表配置。
  1. `seriesType`：`String`，图表显示类型 `bar|line|pie` 分别表示柱状图、折线图、饼图
  2. `legend`：`Boolean`，是否显示图例  `true`:显示图例，`false`:不显示图例
  3. `legendleft`：`String`，图例横向显示位置  `left|center|right` 分别表示居左、居中、居右
  4. `legendlocation`：`String`，图例纵向显示位置 `top|bottom` 分别表示居上、居下
  5. `legendorient`：`String`，图例显示方向布局 `horizontal|vertical` 分别表示水平布局、垂直布局
  6. `smooth：Boolean`，折线是否平滑显示 `true`:表示折线平滑显示  `false`:表示默认显示
  7. `titleText`：`String`，图表标题显示内容
  8. `titleleft`：`String`，图表标题所在位置 `left|center|right` 分别表示居左、居中、居右

**示例**：

以下代码演示如何配置 onCustomEChartSettings 方法，实现展示图表扩展：

<Tabs items={['全局配置', 'SFC 配置']}>
<Tabs.Tab>
```js
import { useUmoEditor } from '@umoteam/editor'

const options = {
  echarts: {
    onCustomSettings(data, config) {
      const { title, seriesType, legend } = config
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
          },
        ],
      }
      return option
    },
  },
}

app.use(useUmoEditor, options)
```
</Tabs.Tab>
<Tabs.Tab>
```vue
<template>
  <umo-editor 
    :echarts="{ onCustomSettings }" 
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'

const onCustomSettings = (data, config) => {
  const { title, seriesType, legend } = config
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
  }
  return option
}
</script>
```
</Tabs.Tab>
</Tabs>

**返回值**：`Object`，返回 ECharts 图表的 options 配置对象。
